<template>
  <div class="logininput">
      <input
        class="iphone"
        v-model="formData.phone"
        type="number"
        placeholder="请输入手机号"
        onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
      />
      <div class="code">
        <input
        class="codeinput"
        v-model="formData.code"
        type="text"
        placeholder="请输入验证码"
      />
        <button @click="getMsgCode" :disabled="disabled" class="codebutton" >{{auth}}</button>
      </div>
      
      <input
        class="paddword"
        v-model="formData.password"
        type="password"
        placeholder="请输入密码"
      />
      <input
        class="paddword"
        v-model="formData.yqm"
        type="password"
        placeholder="请输入邀请码"
      />
      <button class="submit" @click="register">注册</button>
    </div>
</template>

<script>
// import { request, checkPhone, checkEmptyStr, WXshowToast } from '../../utils/index.js';
import { request, checkPhone ,WXshowToast} from '../../utils/index.js';
import { Api } from '../../config/api.js';
export default {
  name: 'logininput',
  data(){
    return {
      disabled: false,
      auth: "获取验证码",
      formData: {
        phone: '',
        password: '',
        code: '',
        // V8YMJY
        yqm: '',
        // yqm: 'YX86',
        openid:""
      },
      countdown:60,
    }
  },
  methods:{
    getMsgCode() {
    const { phone } = this.formData;
    const isValid = checkPhone(phone);

    if (!isValid) {
      WXshowToast('请输入正确手机号');
      return;
    }

  // 倒计时
  this.disabled = true
  let tiem = setInterval(() => {//周期性定时器
      if (this.countdown == 0) {
          this.auth = "获取验证码"
          this.disabled = false
          clearInterval(tiem)
          this.countdown=60
      } else {
          this.countdown--
          this.disabled = true
          this.auth = `${this.countdown}后重新获取`
      }
  }, 1000)
    request({
      url: Api.getMsgCode,
      data: {phone},
      method: 'POST'
    }).then(res => {
        WXshowToast(res.data.msg);
      })
      .catch(e => {
        console.log(e)
        WXshowToast(e.data.msg);});
  },
     // 注册
  async register() {
    let that = this
    const { formData } = that;
    const isValid = checkPhone(formData.phone);
    // this.formData.face = this.wxuserInfo.avatarUrl
    // console.log(this.data.formData.avatarUrl)
    if (!isValid ) {
      WXshowToast('手机号填写错误');
      return;
    }
    if(!formData.code){
          WXshowToast('请填写验证码');
          return;
    }
    if(!formData.password){
         WXshowToast('密码不能为空');
         return;
    }

     let data=await request({
       url:Api.register,
       data:formData,
       method: 'POST'
     })
     console.log(data)
    if(data.data.code ==1001){
        console.log(1)
        WXshowToast(data.data.msg);
    }else{
      let {jwt_token,openid} = data.data.data
      console.log('注册成功',data.data)
      console.log('jwt_token',jwt_token)
      console.log('openid',openid)
      let millisecond = new Date().getTime();
            let expires = new Date(millisecond + 60 * 1000 * 30);
            document.cookie = 'userInfo' + "=" + JSON.stringify(data?.data?.data) + ";expires=" + expires + ";path=/";
            document.cookie = 'token' + "=" + JSON.stringify(data?.data?.data?.jwt_token) + ";expires=" + expires + ";path=/";
            // document.cookie = 'openid' + "=" + JSON.stringify(data?.data?.data?.openid) + ";expires=" + expires + ";path=/";
            this.$router.replace('/')
    }


  },
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">

</style>
